<template>
  <el-container>
    <!-- <el-main> -->
      <!-- :auto-upload = "false" :http-request="uploadFile" :on-change= "Update" -->
    <!-- </el-main> -->
    <div>
        <el-upload
          v-loading="loading"
          class="avatar-uploader"
          action="/v1/app/fileup"
          :headers="Header"
          :on-success="Success"
          :show-file-list = "false"
          :http-request="uploadFile" 
          :on-change= "Update"
          :auto-upload = "false"
          style="width: 160px;height: 110px;margin-left: 14%;margin-top: 20px;"
          ref="upload"
          drag
          clearFiles
          accept=".apk,.ipa,.IPA" 
          >
          <!-- <span><i class="fa fa-qrcode fa-2x"></i></span> -->
          
          <!-- <div class="el-upload__text">将APP拖到此处，或<em>点击上传</em></div> -->
        </el-upload>
          
      <el-dialog
        title="应用描述"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>

        <span slot="footer" class="dialog-footer">
        <div> 

          <el-input 
          type="textarea"
          :rows="2" 
          v-model="msg"
          placeholder="请输入内容">
          </el-input>
          
          
        </div>
        <br>
          <el-select v-model="channel" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        <div class="btn_sub">
          <br>
          <el-button type="primary" @click="inputMsg" >确 定</el-button>
        </div>
        </span>
        </el-dialog>
    </div>
   
  </el-container>
    
 



</template>

<script>
import axios from 'axios';
import { requestApplist} from '../../api/api';
import { appUpload } from '../../api/autopay';
import { uploadByPieces } from "../../js/utils";
import Getmd5 from 'js-md5';
export default {
  name: 'appupload',
  provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                    
      return {                                           
      }
  },
  data() {
    return {
      fileMD5:'',
      isclick:false,
      dialogImageUrl: '',
      dialogVisible: false,
      centerDialogVisible:false,
      disabled: false,
      loading:false,
      isloding:false,
      msg:"",
      fileData: new FormData(),
      applist:[],
      isRouterAlive: true,
      message:"sdfdsfsd",
      fileList:[],
      inputfile:'',
      bmsg:0,
      act:false,
      channel: "founder",
      Header: {'Authorization':sessionStorage.token.replace("\"","").replace("\"","")},
      fileRederInstance : new FileReader(),
      options: [{
          value: 'huawei',
          label: '华为'
        }, {
          value: 'vivo',
          label: 'vivo'
        }, {
          value: 'oppo',
          label: 'oppo'
        }, {
          value: 'xiaomi',
          label: '小米'
        }, {
          value: 'anzhi',
          label: '安智'
        }, {
          value: 'samsung',
          label: '三星'
        }, {
          value: '360',
          label: '360'
        }, {
          value: 'SouGou',
          label: '搜狗'
        }, {
          value: 'Lenovo',
          label: '联想'
        }, {
          value: 'Tencent',
          label: '应用宝'
        }, {
          value: 'founder',
          label: '手迹官方'
        }, {
          value: 'LeShi',
          label: '乐视'
        }, {
          value: 'BaiDu',
          label: '百度'
        }, {
          value: 'MeiZu',
          label: '魅族'
        }, {
          value: 'UC',
          label: 'uc'
        }],
    };
  },
  mounted:function () {
  },
  methods: {
     beforeAvatarUpload(file) {
      this.centerDialogVisible = true;
      this.fileData.append("file",file.raw);
      var res = this.inputMsg()
      if (res){
        return true
      }else{
        return false
      }
      
    },
    Success(response, file, fileList){
      console.log(response);
    },
    Update(f,fileList){
      // this.inputMsg();
      var that = this;
      // that.fileData.append("cesdfds","sdsfds");
      that.fileData.append("file",f.raw);
      that.centerDialogVisible = true;
      // this.$refs.upload.submit();
      return true
    },
    uploadFile(f){
      this.fileData.append("file",f.file);
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    reload () {
      this.isRouterAlive = false;            //先关闭，
      this.$nextTick(function () {
        this.isRouterAlive = true;         //再打开
      }) 
    },
    inputMsg(){

      this.loading = true;
      this.centerDialogVisible = false;
      this.fileData.append("msg",this.msg);
      this.fileData.append("channel",this.channel);
      this.$refs.upload.submit();
      var that = this;
      appUpload(that.fileData).then(res => {

        let { code, msg, data } = res;
        if (code == 200){
          that.$message("上传成功")
          that.loading = false;
          
        }else{
          that.loading = false;
          that.$message.error("app上传失败"+data);
        }
      }).catch(function(error) {
        console.log(error);
        that.loading = false;
        that.$message.error("数据请求失败");
      });
      that.fileData = new FormData();
      that.fileList = [];
      that.msg = "";

      return true
    
  }
  
  }
}
</script>

<style type="text/css">
  .avatar-uploader .el-upload {
    /*border: 1px dashed #d9d9d9;*/
    /*border-radius: 4px;*/
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /*width: 20px;
    height: 10px;*/
    /*padding: 20px;*/
  }
  .el-upload-dragger{
/*    width: 200px;
    height: 100px*/
  }
  .avatar-uploader .el-upload {
    /*border: 1px dashed #d9d9d9;
    border-radius: 0px;*/
  /*  cursor: pointer;
    position: relative;
    overflow: hidden;*/

  }
  .el-upload__text {
    /*margin-top: 50px;*/
    margin-left: 20px;

  }

  .upload {
    width: 100px;
    height: 108px;
  }

/*  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }*/
  
</style>

